<template>
  <div class="">
    <table border style="width: 800px">
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>单价</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td align="center">{{ item.name }}</td>
          <td align="center">
            <button @click="addAndSub(item, false)">-</button>{{ item.num
            }}<button @click="addAndSub(item, true)">+</button>
          </td>
          <td align="center">{{ item.price }}</td>
          <td align="center">{{ item.price * item.num }}</td>
          <td align="center"><button @click="del(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <td></td>
        <td></td>
        <td></td>
        <td>总价：{{ $total }}</td>
      </tfoot>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,computed } from "vue";
type Shop = {
  name: string;
  num: number;
  price: number;
  hobby: string;
};
let $total = ref(0)
const data = reactive<Shop[]>([
  { name: "inzv的裤子", num: 1, price: 100, hobby: "吃鸡j不擦嘴" },
  { name: "inzv的衣服", num: 1, price: 200, hobby: "擦屁股舔指头" },
  { name: "inzv的鞋子", num: 1, price: 300, hobby: "挖鼻屎口屁眼子" },
]);
const addAndSub = (item: Shop, flag: boolean) => {
  console.log(item, flag);
  if (item.num > 1 && !flag) {
    item.num--;
  } else if(item.num < 99 && flag) {
    item.num++;
  }
};
const del = (index:number) => {
  data.splice(index,1)
};

$total = computed<number>(()=>{
  return  data.reduce((prev,next)=>{
        return prev + (next.num *next.price)
    },0)
})
</script>

<style scoped></style>
